<template>
    <!--头部-->
   <div class="main">
      <div class="main-content">
        <div class="container-fluid">
          <div class="headarea">
            <div class="headarea-1">
              <span>日期：</span>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="——"
                start-placeholder=""
                end-placeholder=""
                :size="size"
              />
              
            </div>
            <el-button style="margin-top: -5px;" class="btn" type="primary">查询</el-button>
          </div>
        </div>
      </div>
    </div>
    <!--mian-->
    <div class="ftc">
      <div>
        <div class="blueBg2 ">
          <div class="flh70 ">收支概况</div>
          <div class="flh34">
            <div class="all_profit">0</div>
            <div class="bwt">检查项目数</div>
          </div>
          <div class="flh34 l mr60">
            <div class="all_trade_total_amount">0</div>
            <div class="bwt">合计项目收入</div>
          </div>
        </div>
      </div>
    </div>
    <div>
    </div>
    <!--foot-->
    <div class="foot">
        <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="250">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.registerId }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" width="250">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #reference>
              {{ scope.row.registerMoney }}
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="项目数量" width="250">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            
          >
            <template #reference>
              {{ scope.row.departmentName }}
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="项目总金额" width="250">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #reference>
              {{ scope.row.doctorName }}
            </template>
          </el-popover>
        </template>
      </el-table-column>
      </el-table>
    </div>
</template>

<script lang="ts" setup>
const tableData  = [
    {
        registerId: "",
        registerMoney: "",
        departmentName: "",
        doctorName: "",
       
    },
    {
        registerId: "",
        registerMoney: "",
        departmentName: "",
        doctorName: "",
      
    },
    {
        registerId: "",
        registerMoney: "",
        departmentName: "",
        doctorName: "",
       
    },
    {
        registerId: "",
        registerMoney: "",
        departmentName: "",
        doctorName: "",
       
    },
]
</script>

<style  scoped>
.foot{
    margin-top: 30px;
}
.bwt{
  border-top: 1px solid #fff;
}
.flh34{
  margin-right: 60px!important;
  line-height: 34px;
  float: left;
}
.flh70 {
  margin-right: 60px!important;
  line-height: 70px;
  float: left;
}
.blueBg2{
  padding: 0 10px;
  min-height: 70px;
  background-color: #47c6c6!important;
  margin-left: -4px;
}
.ftc{
  color: #fff!important;
  text-align: center!important;
  /* width: 100%; */
  padding-left: 15px
}



.main-content {
  padding: 28px 10px;
}
/* .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
} */

.headarea {
  padding: 10px;
  /* margin-bottom: 20px !important; */
  font-family: "sans-serif";
  font-size: 10px;
  color: #676a6d;
  /* margin: 0 0 20px; */
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}
.headarea-1 {
  position: relative;
  display: inline-block;
  margin-right: 30px !important;
}
.input-1 {
  width: auto;
  display: inline-block;
  /* border-radius: 2px; */
  /* border-color: #eaeaea;
      background-color: #fcfcfc; */
  padding: 6px 12px;
  font-size: 10px;
  /* line-height: 1; */
  color: #555;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
</style>